<template>
  <div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <van-nav-bar title="创建钱包" @click-left="onClickLeft" :border="false">
          <van-icon name="arrow-left" slot="left" color="#676767" />
        </van-nav-bar>
        <div class="content">
          <div class="head_tip">
            <ul>
              <li>密码用户保护私钥和交易授权，强度非常重要</li>
              <li>im Token 不储存密码，也无法帮您找回，请务必牢记</li>
            </ul>
          </div>
          <div>
            <van-cell-group :border="false">
              <van-field
                v-model="name"
                placeholder="钱包名称"
                maxlength="12"
                @blur="checkblur(1)"
                @input="checkInput"
              />

              <div class="pass">
                <van-field
                  v-model="password"
                  placeholder="密码"
                  @blur="checkblur(2)"
                  @input="checkInput"
                  type="password"
                  maxlength="16"
                />
                <div
                  class="pass_tip"
                  :class="safety == 1?'uls-1':(safety == 2?'uls-2':(safety == 3?'uls-3':(safety == 4?'uls-4':'')))"
                >{{tipMessage}}</div>
                <div
                  class="strength row-space-between"
                  :class="safety == 1?'uls-1':(safety == 2?'uls-2':(safety == 3?'uls-3':(safety == 4?'uls-4':'')))"
                >
                  <span>{{strength}}</span>
                  <ul class="row-space-between flex-column">
                    <li v-for="item in 4" :key="item"></li>
                  </ul>
                </div>
              </div>
              <van-field
                v-model="password2"
                placeholder="重复密码"
                @blur="checkblur(3)"
                @input="checkInput"
                type="password"
                maxlength="16"
              />
              <van-field v-model="tips" placeholder="密码提示信息（可不填）" />
            </van-cell-group>
            <div class="row-justify-content">
              <div class="sure">
                <div class="tips">
                  <img v-if="checkImg" src="../../../assets/images/checked.png" @click="choose" />
                  <img v-else src="../../../assets/images/check.png" @click="choose" /> 我已仔细阅读并同意
                  <span>服务及隐私条款</span>
                </div>
                <button @click="createWallet" :disabled="createDisabled">创建钱包</button>
              </div>
            </div>
            <router-link class="import row-column-center" to="/import">导入钱包</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { base } from "../../../utils/api";
export default {
  data() {
    return {
      checkImg: false,
      strength: "弱", //密码强度
      tipMessage: "不少于8位字符，建议混合大小写字母、数字、特殊符号", //密码规范
      name: "",
      password: "",
      password2: "",
      tips: "",
      createDisabled: true,
      tiptext: false,
      safety: 1
    };
  },
  watch: {
    //			password: function() {
    //				let password = "" + this.password;
    //				password = password
    //					.replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
    //					.replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
    //					.replace(".", "$#$")
    //					.replace(/\./g, "")
    //					.replace("$#$", ".")
    //					.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3"); // 只能输入四个小数
    //				if(password.indexOf(".") < 0 && password != "") {
    //					// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
    //					password = parseFloat(password);
    //				}
    //				this.password = password;
    //			}
  },
  methods: {
    choose() {
      this.checkImg = !this.checkImg;
      if (
        this.name !== "" &&
        this.password.length > 7 &&
        this.password2 === this.password &&
        this.checkImg == true
      ) {
        this.createDisabled = false;
      } else {
        this.createDisabled = true;
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    createWallet() {
      //				this.$toast.loading({
      //					duration: 0,
      //					message: "创建钱包中"
      //				});
      base
        .createWallet({
          type: "ETH_NODE",
          password: this.password,
          confirmPassword: this.password2,
          path: "m/44'/60'/0'/0",
          walletName: this.name
        })
        .then(res => {
          if (res.code == 200) {
            localStorage.Mnemonic = res.data;
            localStorage.backUpBack = "Found";
            this.$router.push({
              path: "Backup"
            });
          }
        });
    },
    input(value) {
      // console.log(value)
    },
    checkblur(index) {
      if (index == 1) {
        if (this.name == "") {
          this.$toast("请输入1-12位钱包名称");
        }
      } else if (index == 2) {
        if (this.password.length < 8) {
          this.$toast("请输入不少于8位字符的钱包密码");
        }
      } else if (index == 3) {
        if (this.password != this.password2) {
          this.$toast("密码不一致，请重新输入");
        }
      }
    },
    checkInput() {
      if (
        this.name !== "" &&
        this.password.length > 7 &&
        this.password2 === this.password &&
        this.checkImg == true
      ) {
        this.createDisabled = false;
      } else {
        this.createDisabled = true;
      }
      let length = this.password.length;
      if (length >= 8) {
        let p1 = this.password.search(/[a-zA-Z]/) != -1 ? 1 : 0;
        let p2 = this.password.search(/[0-9]/) != -1 ? 1 : 0;
        let p3 =
          this.password.search(
            "[ _.`~!@#$%^&*()+=|{}':;',\\[\\]<>/?~！@#￥%……&*（）——+|{}【】‘；：”“’。，、？]|\n|\r|\t"
          ) != -1
            ? 1
            : 0;
        let pa = p1 + p2 + p3;
        if (pa == 1) {
          this.safety = 2;
          this.strength = "一般";
          this.tipMessage = length + "个字符";
        } else if (pa == 2) {
          this.safety = 3;
          this.strength = "中等";
          this.tipMessage = length + "个字符";
        } else if (pa == 3) {
          this.safety = 4;
          this.strength = "强";
          this.tipMessage = length + "个字符";
        }
      } else if (length > 0 && length < 8) {
        this.safety = 1;
        this.strength = "弱";
        this.tipMessage = "不少于8位字符，建议混合大小写字母、数字、特殊符号";
      }
    }
  }
};
</script>
<style lang="less" scoped>
.head_tip {
  width: 100%;
  height: 55px;
  background: #076bb8;
  ul {
    font-size: 12px;
    color: #fff;
    padding-left: 24px;
    padding-top: 8px;
    line-height: 20px;
    li::before {
      width: 3px;
      height: 3px;
      border: 1px solid #fff;
      display: inline-block;
      border-radius: 5px;
      content: "";
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.sure {
  margin-top: 18px;
  width: 340px;
  .tips {
    padding-left: 3px;
    color: #b8c2cb;
    font-size: 12px;
    img {
      width: 18px;
      height: 18px;
      vertical-align: -4px;
      margin-right: 5px;
    }
    span {
      color: #22a0ff;
    }
  }
  button {
    border-radius: 5px;
    width: 100%;
    height: 40px;
    border: none;
    color: #fff;
    background: #1989fa;
    font-size: 12px;
    margin-top: 15px;
  }
  button:disabled {
    background: #cccccc;
  }
  .active {
    background: #108ce9;
  }
}

.import {
  font-size: 12px;
  color: #22a0ff;
  margin-top: 20px;
  padding: 10px;
}

.pass {
  position: relative;
  .pass_tip {
    font-size: 12px;
    text-align: right;
    padding: 10px 16px;
  }
  .strength {
    position: absolute;
    right: 34px;
    top: 20px;
    font-size: 12px;
    z-index: 999;
    span {
      line-height: 28px;
      margin-right: 6px;
    }
    ul {
      height: 29px;
      li {
        width: 12px;
        height: 6px;
        background: #ccc;
      }
    }
  }
}
.uls-1 {
  color: #ff3333;
  li:nth-last-child(1) {
    background-color: #ff3333 !important;
  }
}
.uls-2 {
  color: #22a0ff;
  li:nth-last-child(-n + 2) {
    background-color: #22a0ff !important;
  }
}
.uls-3 {
  color: #22a0ff;
  li:nth-last-child(-n + 3) {
    background-color: #22a0ff !important;
  }
}
.uls-4 {
  color: #41cd90;
  li {
    background-color: #41cd90 !important;
  }
}
.van-cell {
  padding: 23px 20px 7px 20px;
}

.van-cell::after {
  right: 16px !important;
}

.van-cell:last-child::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>